<template>
  <el-checkbox-group
    v-model="check"
    class="base-checkbox-group"
    :class="{'has-checkbox':!isReadOnly}"
    @change="change"
  >
    <el-checkbox
      v-for="item in options"
      :key="item.value"
      class="base-checkbox-group__item"
      :style="{width,height}"
      :label="item.value"
      border
    >
      <slot :row="item.row"></slot>
    </el-checkbox>
  </el-checkbox-group>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
defineOptions({
  name: 'CheckBoxGroup'
});

interface Props {
  options?: any[], // 选项值
  select?: any[]; // 当前选中值
  width?: number | string;
  height?: number | string;
  isRadio?: boolean; // 是否单选
  isReadOnly?:boolean;// 纯展示
}
const props = withDefaults(defineProps<Props>(), {
  select: () => {
    return [];
  },
  options: () => {
    return [];
  },
  width: 'calc(25% - 16px)',
  height: '84px',
  isRadio: false,
  isReadOnly: false
});
const emit = defineEmits(['change', 'update:select']);
const check = computed({
  get() {
    return props.select;
  },
  set(value) {
    emit('update:select', value);
  }
});
const change = (value: string[] | number[]) => {
  check.value = value;
  if (props.isRadio && check.value.length > 0) {
    check.value.splice(0, 1);
  }
  emit('change', check.value);
};
</script>
<style lang="scss" scoped>
.base-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -16px;
  overflow: hidden;

  :deep(.el-checkbox) {
    position: relative;
    box-sizing: border-box;
    display: block;
    min-width: 240px;
    padding: 16px;
    margin: 0 0 16px 16px;
    overflow: hidden;
    cursor: default;
    border: 1px solid  #edf1fd;

    .el-checkbox {
      &__input {
        position: absolute;
        top: -1px;
        right: -1px;
        display: none;
        border-radius: 8px;
      }

      &__label {
        width: 100%;
        padding-left: 0;
      }
    }
  }

  &.has-checkbox {
    :deep(.el-checkbox) {
      cursor: pointer;
      background: #fafafa;
      border: 1px solid  #fafafa;

      &:hover,
      &.is-checked {
        background-color: #edf1fd;
        border-color: #4975E9;
        box-shadow: 0 2.352px 8px 0 rgb(74 123 255 / 8%);
      }

      &.is-checked {
        .el-checkbox {
          &__input {
            display: block;
          }
        }
      }
    }
  }
}
</style>
